<template>
  <div>
    <page-wrapper content-full-height fixed-height>
      <!-- 数据列表 -->
      <vxe-grid
        id="File"
        ref="grid"
        :columns="tableColumn"
        height="auto"
        resizable
        show-overflow
        highlight-hover-row
        keep-source
        row-id="id"
        :proxy-config="proxyConfig"
        :loading="loading"
        :pager-config="{}"
        :toolbar-config="toolBarConfig"
      >
        <template #fileUrl_default="{ row }">
          <a-image :src="row.fileUrl" />
        </template>
        <template #form>
          <j-border>
            <j-form bordered label-width="80px">
              <!-- <j-form-item label="文件名">
                <a-input v-model:value="searchFormData.fileName" allow-clear />
              </j-form-item> -->
            </j-form>
          </j-border>
        </template>
        <!-- 工具栏 -->
        <template #toolbar_buttons>
          <a-space>
            <a-button type="primary" :icon="h(SearchOutlined)" @click="search">查询</a-button>
            <a-button
              type="primary"
              :icon="h(PlusOutlined)"
              @click="
                () => {
                  addDialogVisible = true;
                }
              "
              >新增</a-button
            >
          </a-space>
        </template>
      </vxe-grid>
    </page-wrapper>
    <!-- 新增窗口 -->
    <add-img @confirm="search" v-model:visible="addDialogVisible" />
  </div>
</template>

<script setup>
  import { ref, h } from 'vue';
  import * as api from '@/api/system/file';
  import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { buildSortPageVo } from '@/utils/utils';
  import AddImg from './add.vue';

  const loading = ref(false);
  const grid = ref(null);
  const addDialogVisible = ref(false);

  const tableColumn = ref([
    { type: 'checkbox', width: 45 },
    { field: 'originalFileName', title: '文件名', width: 100 },
    { field: 'fileExt', title: '文件类型', minWidth: 120 },
    { field: 'platform', title: '存储平台', minWidth: 120 },
    { field: 'fileUrl', title: 'URL', minWidth: 120, slots: { default: 'fileUrl_default' } },
    { field: 'createTime', title: '上传时间', minWidth: 120 },
  ]);
  const proxyConfig = ref({
    props: {
      // 响应结果列表字段
      result: 'records',
      // 响应结果总条数字段
      total: 'total',
    },
    ajax: {
      // 查询接口
      query: ({ page, sorts }) => {
        console.log(page, sorts);
        return api.query(buildQueryParams(page, sorts));
      },
    },
  });

  const toolBarConfig = ref({
    slots: {
      buttons: 'toolbar_buttons',
    },
  });

  // 查询前构建查询参数结构
  const buildQueryParams = (page, sorts) => {
    return {
      ...buildSortPageVo(page, sorts),
    };
  };
  const search = () => {
    grid?.value.commitProxy('reload');
  };
</script>

<style scoped>
  .file_img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
</style>
